<!-- 公共文件 start -->
@extends('admin.public.base')
<!-- 公共文件 end -->

@section('content')
<style>.layui-card-body{overflow-y: scroll;}</style>
<div class="x-nav">
    <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">后台角色管理</a>
        <a><cite>管理员列表</cite></a>
    </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <form class="layui-form layui-col-space5">
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input" autocomplete="off" placeholder="开始日" name="start" id="start"></div>
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input" autocomplete="off" placeholder="截止日" name="end" id="end"></div>
                        <div class="layui-inline layui-show-xs-block">
                            <input type="text" name="username" placeholder="请输入用户名" autocomplete="off" class="layui-input"></div>
                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn" lay-submit="" lay-filter="sreach">
                                <i class="layui-icon">&#xe615;</i></button>
                        </div>
                    </form>
                </div>
                <div class="layui-card-body">
                    <table class="layui-hide" id="test" lay-filter="test"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
        <div class="layui-inline layui-show-xs-block">
            <button class="layui-btn" onclick="xadmin.open('添加管理员','/admin/admin/userAdd',600,400)"><i class="layui-icon"></i>添加</button>
        </div>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    layui.use('laydate',
            function () {
                var laydate = layui.laydate;

                //执行一个laydate实例
                laydate.render({
                    elem: '#start', //指定元素
                type: 'datetime'
                });

                //执行一个laydate实例
                laydate.render({
                    elem: '#end', //指定元素
                type: 'datetime'
                });

            });

    layui.use('table', function () {
        var table = layui.table;
        table.render({
            elem: '#test'
            , url: '/admin/admin/userListJson?id=1'
            , toolbar: '#toolbarDemo'
            , title: '用户数据表'
            , cols: [[
                    {type: 'checkbox', fixed: 'left'}
                    , {field: 'id', title: 'ID',width:80}
                    , {field: 'user_name', title: '用户名',width:120}
                    , {field: 'mobile', title: '手机号',width:120}
                    , {field: 'role', title: '角色',width:120}
                    , {field: 'login_num', title: '登入次数',width:80}
                    , {field: 'created_at', title: '注册时间'}
                    , {fixed: 'right', title: '操作', toolbar: '#barDemo'}
                ]]
            , page: true
        });

        //头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：' + data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选' : '未全选');
                    break;
            }
            ;
        });

        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            //console.log(obj)
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    //发异步删除数据
                    $.ajax({
                        type: 'POST',
                        url: '/admin/admin/userDel?id=' + data.id,
                        dataType: 'json',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                        },
                        success: function (data) {
                            // console.log(data);
                            if (data.code == 1) {
                                obj.del();
                                layer.close(index);
                                layer.msg('已删除!', {icon: 1, time: 1000});
                            } else {
                                layer.alert(data.msg)
                            }
                        },
                        error: function (xhr, type) {
                            alert('Ajax error!')
                        }
                    });
                });
            } else if (obj.event === 'edit') {
                xadmin.open('修改管理员','/admin/admin/userEdit?id='+data.id,600,400);
                return;
            }
        });
    });
</script>

@endsection
